<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>QR Parser</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <script>
            // setTimeout(function() { location.reload(); }, 5000);
        </script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <table class="table is-fullwidth">
                    <thead>
                        <tr>
                            <th>Task ID</th>
                            <th>Timestamp</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in tasks %}
                        <tr>
                            <td>{{ task.task_id }}</td>
                            <td>{{ task.timestamp }}</td>
                            <td>{{ task.status }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
        <section class="section">
            <div class="container is-fullwidth">
                <form class="form" action="/task" method="post" enctype="multipart/form-data">
                    <div class="field">
                        <div class="control">
                            <div class="file">
                                <label class="file-label">
                                    <input class="file-input" type="file" name="file">
                                    <span class="file-cta">
                                        <span class="file-icon">
                                            <i class="fas fa-upload"></i>
                                        </span>
                                        <span class="file-label">
                                            Choose QR image…
                                        </span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="control">
                            <button class="button is-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </body>
</html>
